<template>
  <div class="app-container">
    <bread parentPathText="投诉建议" currentPathText="投诉建议类型"/>
    <el-table v-loading="loading" :data="tableList">
      <el-table-column
        align="center"
        label="类型"
        prop="typeName"
        min-width="20%"
      />
      <el-table-column
        align="center"
        label="类型描述"
        prop="typeDescription"
        :show-overflow-tooltip="true"
        min-width="15%"
      />
      <el-table-column
        align="center"
        label="操作"
        min-width="25%"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加/编辑弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
     :before-close="handleClose"
      ref="ruleForm" 
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
      >
        <el-form-item
          label="投诉建议类型"
          prop="gridSection"
          label-width="108px"
        >
          {{ typeName }}
        </el-form-item>
        <el-form-item label="类型描述" prop="textarea" label-width="108px">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5 }"
            :rows="2"
            placeholder="请输入内容"
            v-model="ruleForm.textarea"
            append-to-body
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>
<script>
import initPagin from '../mixins/index.js'
export default {
  mixins:[initPagin],
  data() {
    return {
      typeName: "",
      queryParams: {
        gridVal: "",
        groupVal: "",
        type: "",
        info: "",
      },
      loading: false,
      // 弹框
      title: "添加",
      dialogVisible: false,
      ruleForm: {
        gridName: "",
        textarea: "",
      },
      rules: {
        textarea: [
          { required: true, message: "请输入类型描述", trigger: "blur" },
        ],
      },
      time: new Date().getTime(),
      id:'',
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      this.loading = true;
      let params = {
        time: this.time,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.complaintType.list, {
          time: this.time,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.loading = false;
          this.total = res.data.count;
          this.tableList = res.data.data;
        })
        .catch(() => {});
    },
    // 编辑
    handleUpdate(row) {
      this.dialogVisible = true;
      this.title = "编辑类型";
      this.id = row.id;
      let params = {
        time: this.time,
        id:this.id,
      };
      let result = this.$md5.transferValue(params);
      this.axios
        .post(this.stateUrl.complaintType.detail, {
          time: this.time,
          id:this.id,
          sign: this.$md5.val(result),
        })
        .then((res) => {
          this.typeName = res.data.data.typeName;
          this.ruleForm.textarea = res.data.data.typeDescription;
        })
        .catch(() => {});
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            time: this.time,
            typeName:this.typeName,
            typeDescription:this.ruleForm.textarea,
            id: this.id,
          }
          let result = this.$md5.transferValue(params);
          this.axios
            .post(this.stateUrl.complaintType.edit, {
              time: this.time,
              id: this.id,
              typeName:this.typeName,
              typeDescription:this.ruleForm.textarea,
              sign: this.$md5.val(result),
            })
            .then( res => {
               if (this.id) {
                this.msgSuccess("编辑成功");
              }
               this.dialogVisible = false;
              this.getList();
            })
            .catch(() => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
</style>